<%--
  Created by IntelliJ IDEA.
  User: XLY
  Date: 2020/10/8
  Time: 19:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>课程管理页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <button class="button" onclick="addCourse()">新增课程</button>
    <input  type="search" id="classNameSearch" placeholder="请输入查询课程" style="height: 30px;width: 250px;border-radius: 6px;">
    <button class="button" id="searchButton" onclick="searchByClassName()">查询课程</button>
</div>
<div class="margin">
    <table class="table">
        <thead><tr>
            <td>编号</td>
            <td>课程名</td>
            <td>老师id</td>
            <td>班级</td>
        </tr></thead>
        <tbody id="tb">

        </tbody>
    </table>
</div>
<!-- 分页区域-->
<div class="margin">
    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="4" >4</option>
    <option value="6">6</option>
    <option value="8" selected="selected">8</option>
</select>条数据，当前是第<span id="currentPageSpan"></span>页，
    总共<span id="totalPageSpan"></span> 页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="prePage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastPage()">尾页</button>
</div>
<!-- 这里的div做一个编辑用户信息的模态框-->
<div class="modal" id="editModal">
    <!-- 对话模态框-->
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>课程信息编辑</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">课程名</label>
                <input class="form-control" type="text" id="nameInput" placeholder="请输入课程名">
                <label class="control-label">老师id</label>
                <input class="form-control" type="text" id="teacherInput" placeholder="请输入老师id">
                <label class="control-label">班级</label>
                <input class="form-control" type="text" id="classInput" placeholder="请输入班级">
                <input type="hidden" id="courseIdInput">
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="editConfirm()">确定</button>
            </div>
        </div>
    </div>
</div>
<script>
    //当前页码
    var currentPage = 1;
    //每页记录数
    var pageSize = 8;
    //总共有多少页
    var totalPage;
    $(function () {
        loadList();
    });

    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        loadListByPage();
    }

    //首页的回调方法
    function firstPage() {
        currentPage = 1;
        loadListByPage();
    }

    //上一页回调方法
    function prePage() {
        currentPage--;
        if (currentPage < 1) {
            currentPage = 1;
        }
        loadListByPage();
    }

    //下一页回调方法
    function nextPage() {
        currentPage++;
        if (currentPage > totalPage) {
            currentPage = totalPage;
        }
        loadListByPage();
    }

    //尾页回调方法
    function lastPage() {
        currentPage = totalPage;
        loadListByPage();
    }
    function showList(courseList) {
        console.log(JSON.stringify(courseList));
        var html = '';
        for (var i = 0; i < courseList.length; i++) {
            var item = courseList[i];
            console.log(JSON.stringify(item));
            html += "<tr>";
            html += "<td>" + item.c_id + "</td>";
            html += "<td>" + item.name + "</td>";
            html += "<td>" + item.t_id + "</td>";
            html += "<td>" + item.classname + "</td>";
            html += "<td><button class='button' onclick='getCourseDetail(\"" + item.c_id + "\")'>编辑</button>" +
                "<button class='button' onclick='deleteOneCourse(\""+item.c_id+"\")'>删除</button></td>";
            html += "</tr>";
        }
        $("#tb").html(html);
    }

    function loadList() {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/getlist",
            type: 'get',
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showList(result.courseList);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err))
            }
        });
    }

    function loadListByPage() {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/getListByPage",
            type: 'get',
            data: {"currentPage": currentPage, "pageSize": pageSize},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showList(result.courseList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    //获取课程详细信息
   function getCourseDetail(c_id) {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/getone",
            type: 'get',
            data: {"c_id":c_id},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showadd(result.course);
                } else {
                    alert(result.message);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    function addCourse() {
        showadd();
    }
    function showadd(course) {
        if (course != null) {
            $("#courseIdInput").val(course.c_id);
            $("#nameInput").val(course.name);
            $("#teacherInput").val(course.t_id);
            $("#classInput").val(course.classname);
        } else {
            //数据归零
            $("#courseIdInput").val(0);
            $("#nameInput").val("");
            $("#teacherInput").val("");
            $("#classInput").val("");
        }
        $("#editModal").modal("show");
    }
    function editConfirm() {
        var courseidValue=$("#courseIdInput").val();
        var nameValue = $("#nameInput").val();
        var t_id = $("#teacherInput").val();
        var classValue=$("#classInput").val();
        var dataValue = {
            c_id:courseidValue,name:nameValue,t_id:t_id,classname:classValue
        };
        $.ajax({
            url: "${pageContext.request.contextPath}/course/edit",
            type: 'post',//使用post提交大量数据
            contentType: 'application/x-www-form-urlencoded',//指明为表单提交
            data: dataValue,
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    $("#editModal").modal("hide");
                    //再次分页加载数据并显示在页面上
                    loadListByPage();
                } else {
                    alert(result.message);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    function deleteOneCourse(c_id) {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/delete",
            type: 'get',
            contentType: 'application/x-www-form-urlencoded',//指明为表单提交
            data: {"c_id":c_id},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    loadListByPage();
                }
                alert(result.message);
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    function searchByClassName(){
        var classname = $("#classNameSearch").val();
        $.ajax({
            url: "${pageContext.request.contextPath}/course/search",
            type: 'get',
            contentType: 'application/x-www-form-urlencoded',//指明为表单提交
            data: {"classname":classname},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showList(result.user);
                   /* <%
                        out.flush();
                    %>*/
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
</script>
</body>
</html>
